<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程列表-会员</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/xadmin.js"></script>

</head>
<body>
<!-- 顶部开始 -->
<div class="container">
    <div class="logo"><a href="./index.html">健身房管理系统 V1.1</a></div>
    <div class="open-nav"><i class="iconfont">&#xe699;</i></div>
    <ul class="layui-nav right" lay-filter="">
        <li class="layui-nav-item">
            <a href="javascript:;">${logUsername}</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="${pageContext.request.contextPath}/member/toOneselfpage.action">个人中心</a></dd>
                <dd><a href="${pageContext.request.contextPath}/member/toMemcourseSchedule.action">课程表</a></dd>
                <dd><a href="${pageContext.request.contextPath}/member/outlogin.action">退出</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/index.jsp">前台首页</a></li>
    </ul>
</div>
<!-- 顶部结束 -->
<!-- 中部开始 -->
<div class="wrapper">
    <!-- 左侧菜单开始 -->
    <div class="left-nav">
        <div id="side-nav">
            <ul id="nav">
                <li class="list" current>
                    <a href="">
                        <i class="iconfont">&#xe761;</i>
                        欢迎页面
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>
                <%--        教练--%>
                <li class="list">
                    <a href="${pageContext.request.contextPath}/member/toCoachpage.action">
                        <i class="iconfont">&#xe70b;</i>
                        教练查询
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>
                <%--        课程管理--%>
                <li class="list">
                    <a href="${pageContext.request.contextPath}/member/toCoursepage.action">
                        <i class="iconfont">&#xe70b;</i>
                        课程查询
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 左侧菜单结束 -->
    <!-- 右侧主体开始 -->
    <div class="page-content">
        <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <form class="layui-form xbs" action="">
                <div class="layui-form-pane" style="text-align: center;">
                    <div class="layui-form-item" style="display: inline-block;">
                        <label class="layui-form-label xbs768">金额范围</label>
                        <div class="layui-input-inline xbs768">
                            <input type="text" class="layui-input" placeholder="不少于￥" id="minMoney" autocomplete="off">
                        </div>
                        <div class="layui-input-inline xbs768">
                            <input type="text" class="layui-input" placeholder="不多于￥" id="maxMoney" autocomplete="off">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" id="coursename" placeholder="请输入课程类型" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline" style="width:80px">
                            <%-- 用Ajax发送搜索信息，接收信息展示在表格中 --%>
                            <button type="button" class="layui-btn"  lay-submit="" id="memfindcourse">搜索</button>
                        </div>
                    </div>
                </div>
            </form>
            <div id="table">
                <xblock>
                    <span class="layui-btn">课程展示</span><span class="x-right" style="line-height:40px" id="listSize"></span>
                </xblock>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th hidden>ID</th>
                        <th>课程名</th>
                        <th>报名费</th>
                        <th>课程周期</th>
                        <th>上课时间(1小时)</th>
                        <th>授课教练</th>
                        <th>上课教室</th>
                        <th>课程人数</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tb">
                    <c:forEach var="course" items="${courseInfo.list}">
                        <tr>
                            <td hidden>${course.courseid}</td>
                            <td>${course.coursename}</td>
                            <td>${course.coursemoney}</td>
                            <td>
                                <fmt:formatDate value="${course.courseend}" pattern="yyyy.MM.dd"/>
                                ~
                                <fmt:formatDate value="${course.coursestart}" pattern="yyyy.MM.dd"/>
                            </td>
                            <td>
                                    ${course.week.weekname}&nbsp;<fmt:formatDate value="${course.section.sectiontime}" pattern="HH:mm:ss"/>
                            </td>
                            <td>${course.coach.coachrealname}</td>
                            <td>${course.classroom.classroomname}</td>
                            <td>${course.courseMem}</td>
                            <td class='td-status'>
                                <span class='layui-btn layui-btn-normal layui-btn-mini' onclick='reser(${course.courseid})'>报名</span>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
                <%--            分页--%>
                <div id="bottom">
                    <div>
                        <nav aria-label="..." style="text-align:center;">
                            <ul class="pagination layui-laypage" style="white-space: nowrap">
                                <%--                            向前翻页--%>
                                <li style="display: inline-block"><a href="javascript:ajaxsplit(${courseInfo.prePage})" aria-label="Previous">&laquo;</a></li>

                                <c:forEach begin="1" end="${courseInfo.pages}" var="i">
                                    <c:if test="${courseInfo.pageNum==i}">
                                        <li style="display: inline-block">
                                            <a href="javascript:ajaxsplit(${i})"
                                               style="background-color: #DFDFDF">${i}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${courseInfo.pageNum!=i}">
                                        <li style="display: inline-block">
                                            <a href="javascript:ajaxsplit(${i})">${i}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                                <%--                            向后翻页--%>
                                <li style="display: inline-block"><a href="javascript:ajaxsplit(${courseInfo.nextPage})" aria-label="Previous">&raquo;</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- 右侧内容框架，更改从这里结束 -->
        </div>
    </div>
    <!-- 右侧主体结束 -->
</div>
<!-- 中部结束 -->
<!-- 页面动态效果 -->
<script>
    ////异步ajax分页请求
    function ajaxsplit(page) {
        var a = $("#minMoney").val();
        var b = $("#maxMoney").val();
        var c = $("#coursename").val();
        if (a.length==0 && b.length==0 && c.length==0){
            $.ajax({
                url:"${pageContext.request.contextPath}/member/ajaxsplit2.action",
                data:{"page":page},
                type:"post",
                success:function () {
                    //更新id=table部分内容
                    $("#table").load("http://localhost:8080/GamnasiumSystem/memcourse_list.jsp #table");
                }
            });
        }else {
            $.ajax({
                url:"${pageContext.request.contextPath}/member/findSplit.action",
                data:{
                    page:page,
                    minMoney:a,
                    maxMoney:b,
                    coursename:c
                },
                type:"post",
                success:function () {
                    //更新id=table部分内容
                    $("#table").load("http://localhost:8080/GamnasiumSystem/memcourse_list.jsp #table");
                }
            });
        }
    }
    //课程报名
    function reser(index) {
        //判断是否报名满人了
        $.ajax({
            url:"${pageContext.request.contextPath}/member/countMem.action",
            type:"post",
            data: {courseid:index},
            dataType:"text",
            success:function (result){
                if (result != "ok"){
                    layer.msg("人满啦，下次早点报名！");
                }else {
                    //用Ajax获取报名信息，课程和会员信息（session中有，可忽略）
                    $.ajax({
                        url:"${pageContext.request.contextPath}/member/confirmation.action",
                        type:"post",
                        data: {courseid:index},
                        dataType:"text",
                        success:function (result){
                            // console.log(result);
                            if (result=="ok"){
                                x_admin_show("课程报名信息确认","${pageContext.request.contextPath}/mem_confirmation.jsp","","400");
                            }else {
                                layer.msg("已报名，请勿重复报名！");
                            }
                        },
                        error:function (){
                            alert("课程异常error");
                        }
                    });
                }
            },
            error:function (){
                alert("课程异常error");
            }
        });
    }
    //多条件搜索，用Ajax发送请求接收请求显示在表格
    $("#memfindcourse").click(function (){
        $.ajax({
            url: "${pageContext.request.contextPath}/member/memfindcourse.action",
            type: "post",
            data: {minMoney:$("#minMoney").val(),maxMoney:$("#maxMoney").val(),coursename:$("#coursename").val()},
            success:function (){
                $("#table").load("http://localhost:8080/GamnasiumSystem/memcourse_list.jsp #table");
            }
        });
    });
</script>

</body>
</html>
